<template>

  <div style="padding-left: 10px">

    <div class="mallCreate">
      <el-form>

        <el-form-item label="商品编号:">
          <el-input v-model="itemCode"></el-input>
        </el-form-item>

        <el-form-item label="店铺名称:">
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.sellerName"
                       :value="item.sellerId"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="类目选择:">
          <el-select v-model="cateId" placeholder="请选择">
            <el-option v-for="item in cateList" :key="item.cid" :label="item.cateName"
                       :value="item.cid"></el-option>
          </el-select>
          <el-select v-model="childCateId" placeholder="请选择">
            <el-option v-for="item in childCateList" :key="item.cid" :label="item.cateName"
                       :value="item.cid"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品标题:">
          <el-input v-model="title"></el-input>
        </el-form-item>

        <el-form-item>
          商品价格: &nbsp;&nbsp;<el-input style="width: 100px" v-model="discount"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;市场均价:
          <el-input style="width: 100px" v-model="price"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;初始销量:
          <el-input style="width: 100px" v-model="fakeSales"></el-input>
          <!--<label>佣金:</label>-->
          <!--<el-input style="width: 100px" v-model="reward"></el-input>-->
        </el-form-item>

        <el-form-item label="重量:">
          <el-input style="padding-left: 30px" v-model="weight"></el-input> (若邮费计算方式不按称重计算可不填商品重量)
        </el-form-item>

        <el-form-item label="运费:">
          <el-select v-model="post" placeholder="请选择" style="padding-left: 30px">
            <el-option v-for="item in postData" :key="item.feeId" :label="item.name" :value="item.feeId"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品顶部展示图:">
          <span>(不多于9个图片链接,多个链接换行)</span>
          <br>
          <el-input type="textarea"
                     class="textarea"
                    row="10"
                    resize="none"
                    v-model="images"
                    autocomplete="off"
                    placeholder="多个链接切换行输入">
          </el-input>
        </el-form-item>
      </el-form>

      <div>
        <div style="background: #f9f9f9;margin-bottom: 20px">
          <div style="float: left;padding: 10px 12px 0 10px">商品参数:</div>
          <br>
          <br>
          <div style="width: 600px">
            <div v-for="(item,index) in params" style="margin: 0 0 10px 0">
              <template>
                <el-input style="width: 100px" v-model="item.name"></el-input>
                <el-input style="width: 300px" v-model="item.value"></el-input>
                <el-button @click="removeParams(index)">删除</el-button>
              </template>
            </div>
            <br>
          </div>
          <el-button @click="addModel()" style="margin:0 0 10px 10px">自定义参数</el-button>
        </div>
        <div style="background: #f9f9f9;margin-bottom: 20px">
          <div style="float: left;padding: 10px 12px 0 10px">商品SKU:</div>
          <br>
          <br>
          <div style="width: 600px;margin: 0 0 10px 0" v-for="(item,index) in skus">
            <template>
              <el-input style="width: 100px" v-model="item.name"></el-input>
              <el-input style="width: 300px" v-model="item.value"></el-input>
              <el-button @click="removeSku(index)">删除</el-button>
            </template>
          </div>
          <br>
          <el-button @click="addSku()" style="margin:0 0 10px 10px">添加属性</el-button>
        </div>
        <div style="background: #f9f9f9;width: 100%;margin-bottom: 20px">
          <div style="float: left;padding: 10px 12px 20px 10px">
             商品详情图链接(多个链接切换行输入)
            </div>
           <br>
           <el-input class="textarea"
                     type="textarea" row="20"
                     v-model="details"
                     autocomplete="off" placeholder="多个链接切换行输入">
           </el-input>
          <div style="clear: both"></div>
        </div>
      </div>

      <el-button type="primary" style="margin: 50px 0 0 0" @click="goSendGoods">发布商品</el-button>
    </div>

  </div>

</template>

<script>
  import LazyImgUpload from "../../components/LazyImgUpload"
  import {ajax, sellers, addItem, postFeeModel, selMainCate} from "../../data/service";

  export default {
    name: "mallCreate",
    data() {
      return {
        options: [],
        cateList: [],
        childCateList: [],
        postData:[],
        value: '',
        cateId: '',
        childCateId: '',
        post: '',
        params: [],
        skus: [],
        details:'',
        showDetails:[],
        itemCode: '',
        title: '',
        discount: '',
        price: '',
        fakeSales: '',
        reward:'',
        weight: '',
        images:'',//展示图
        backImg:require('../../assets/scImg1.png'),//背景图
        skuJson:'',
        paramsJson:'',
        feeId:'',
        imgIndex:'',
        choseIndex:''
      }
    },
    mixins: [ajax],
    created() {
      this.getShops();
      this.getMainCates();
      this.getPostFeeModel();
    },

    watch: {
      cateId(){
        this.childCateList = [];
        this.cateList.forEach(item => {
          if(item.cid === this.cateId){
            this.childCateList = item.children
          }
        })
      }
    },
    methods: {
      getShops() {
        this.doajax(sellers, {}, (resp) => {
          this.options = resp.data;
        })
      },

      getMainCates(){
        this.doajax(selMainCate, {}, resp => {
          this.cateList = resp.data
        })
      },
      getPostFeeModel(){
        this.doajax(postFeeModel,{},(resp)=>{
          this.postData=resp.data;
        })
      },
      goSendGoods() {

        if(this.itemCode===''){this.error("请输入商品编号");return}
        if(this.value===''){this.error("请选择店铺");return}
        if(this.title===''){this.error("请输入商品标题");return}
        if(this.discount===''){this.error("请输入商品特价");return}
        if(this.price===''){this.error("请输入商品原价");return}
        if(this.fakeSales===''){this.error("请输入商品初始销量");return}
        if(this.post===''){this.error("请运费模板");return}
        if(this.images===undefined || this.images ===''){
           this.error("请至少添加一张主图");
           return;
        }
        if(this.childCateId === ''){
          this.error("请选择商品类目");
          return;
        }
        let str;
        if(this.details){
           str =  this.blankSplit(this.details);
        }

        let img = this.blankSplit(this.images);

        this.skuJson=( JSON.stringify(this.skus) );
        this.paramsJson=( JSON.stringify(this.params) );

        this.doajax(addItem, {
          itemCode: this.itemCode,
          sellerId: this.value,
          cid: this.childCateId,
          title: this.title,
          discount: this.discount,
          price: this.price,
          reward:this.reward,
          fakeSales: this.fakeSales,
          images:img,
          weight: this.weight,
          skus:this.skuJson,
          params:this.paramsJson,
          feeId:this.post,
          details:str===undefined?"":str,
        }, (resp) => {
            this.$router.push('/admin/mallList');
        })
      },
      addModel() {
        let modelParam = {name:'',value:''};
        this.params.push(modelParam);
      },
      removeParams(index) {
        this.params.splice(index, 1);
      },
      addSku() {
        let modelParam = {name:'',value:''};
        this.skus.push(modelParam);
      },
      removeSku(index) {
        this.skus.splice(index, 1);
      },
      //图片链接的过滤，对多个回车的处理
      blankSplit(str){
        if(!str){
          return "";
        }
        let a = str.split(/[\s\n]/);
        let b = [];
        for(let i = 0;i<a.length;i++){
          a[i].trim();
          if(a[i]!==undefined && a[i]!==''){
            b.push(a[i]);
          }
        }
        return b.join(",");
      }
    },
    components: {
      LazyImgUpload
    }
  }
</script>

<style>
  .mallCreate .el-input {
    width: 500px;
  }

  .afterUpload {
    float: left;
    padding-right: 20px;
  }

  .afterUpload > img {
    width: 80px!important;
    height: 80px!important;
  }

  .createImg > .afterUpload {
    padding-right: 0;
  }

  .createImgX {
    width: 30px;
    float: left;
  }
  .textarea{}
  .textarea textarea{
    width:1000px;
    height: 300px;
  }

</style>
